import { useEffect, useState } from 'react'
import store from './store'

export default function App() {
  // 获取 redux 仓库的状态，保存给 react 的状态
  const [storeState, setStoreState] = useState(store.getState())
  useEffect(() => {
    // 组件挂载时，订阅 redux 仓库，让仓库的状态和组件的状态关联起来
    const unSubscribe = store.subscribe(() => {
      // console.log('现在仓库的状态为', store.getState())
      setStoreState(store.getState())
    })
    // 组件卸载清理订阅
    return () => {
      unSubscribe()
    }
  }, [])

  return (
    <div>
      <h1>App根组件</h1>
      <h2>{JSON.stringify(storeState)}</h2>
      <button onClick={() => store.dispatch({ type: 'add', payload: 1 })}>点击+1</button>
    </div>
  )
}
